<template>
	<view class="cart_box" v-if="buffer">
		<view class="cart_head">
			<view class="cart_menu">
				<text>全部(20)</text>
				<text>降价(4)</text>
				<text>常卖(2)</text>
				<text>分类</text>
			</view>
			<view class="cart_ticket">
				<!-- 此处使用checkbox是因为支付宝switch没有checkbox类型 -->
				<!-- <switch type="checkbox" :checked="true" color="#ff6040"  /> -->
				<checkbox color="#FF6040" value="true" />
				<text class="cart_ticket_text1">小U自营</text>
				<text class="cart_ticket_text2">以免运费 |</text>
				<text class="cart_ticket_text3">领券</text>
			</view>
		</view>

		<view class="container">
			<view class="top">
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0" v-for="(item,index) in cartList"
					:key="item.id">
					<view class="cartInfo" id="demo1">
						<!-- 明日来写购物车基本信息 -->
						<view class="cartInfochild">
							<!-- 选择框 -->
							<view class="cartInfo_switch common">
								<!-- 点击当前商品 -->
								<!-- <checkbox-group >
									<checkbox
										color="#FF6040" 
										:checked="true"
										value="1"
									/>
								</checkbox-group> -->

								<switch type="checkbox" :checked="item.status" color="#ff6040"
									@change="checkedEvent(index, $event)" />
							</view>
							<!-- 图片 -->
							<view class="cartInfo_image common">
								<image :src="item.img" mode="widthFix"></image>
							</view>

							<!-- 信息 -->
							<view class="cartInfo_info">
								<label style="font-size: 32rpx;">{{item.goodsname}}</label>
								<label style="font-size: 24rpx; color: #ccc;">规格：不错的商品</label>
								<label style="font-size: 20rpx; color: #FF6040;">比加入降低￥100</label>
								<label style="color:#FF6040;">￥
									<text style="font-size: 40rpx;color:#FF6040;">{{item.price - 100}}
									</text> <text>￥{{item.price}}</text>
								</label>
							</view>
							<!-- 加减数量 -->
							<view class="cartInfo_num">
								<view class="cartInfo_num_child">
									<label @click="subNum(index)">－</label>
									<label>{{item.num}}</label>
									<label @click="addNum(index)">＋</label>
								</view>
							</view>
						</view>

					</view>
					<view class="cartDel" id="demo2">
						<label @click="removeData(item)">删除</label>
					</view>
				</scroll-view>
			</view>

			<!-- 底部 -->
			<view class="foot">
				<view class="footd1">
					<checkbox-group @change="changeAll">
						<checkbox color="#FF6040" value="1" :checked="allChecked" />
					</checkbox-group>
					<!-- <switch type="checkbox" :checked="true" color="#ff6040" /> -->
					<label>全选</label>
				</view>
				<view class="footd2">
					<view class="footd2sp1">合计：<label style="color: #FF6040;">￥ {{totalPrice}}</label></view>
					<label class="footd2sp2">不含运费，已优惠￥0.00</label>
				</view>
				<!-- 跳到提交订单，结算页面 -->
				<view class="footd3" hover-class="touchOpacity">
					<!-- 被选中的商品的个数 -->
					<label @click="goClose">去结算({{totalNum}}件)</label>
				</view>
			</view>

		</view>
	</view>
	<!-- 无数据提示 -->
	<view v-else>
		<cartnull />
	</view>
</template>

<script>
	// 引入数据为空提示组件
	import cartnull from '@/components/cartnull/cartnull.vue';
	
	const userinfo = uni.getStorageSync('userinfo');
	export default {
		components: {
			cartnull
		},
		data() {
			return {
				cartList: [], //初始化购物车数据
				buffer: true, //检测购物车是否有数据
				allChecked: false, // 全选状态
			}
		},
		// 页面显示时
		onShow() {
			this.request_cartlist();
			// 处理全选
			this.allChecked = this.cartList.every(item => item.status);
		},

		computed: {
			// 计算总价钱
			totalPrice() {
				let newData = this.cartList.filter(item => item.status);
				return newData.reduce((count, item) => count += item.num * item.price, 0);
			},
			// 计算总数量
			totalNum() {
				let newData = this.cartList.filter(item => item.status);
				return newData.reduce((count, item) => count += item.num, 0);
			}
		},

		methods: {
			// 单选事件
			checkedEvent(index, e) {
				this.cartList[index].status = e.detail.value;
				// 处理全选
				this.allChecked = this.cartList.every(item => item.status);
			},

			// 全选事件
			changeAll(e) {
				const value = e.detail.value.length >= 1 ? true : false;
				this.cartList.forEach(item => item.status = value);
			},

			// --
			subNum(index) {
				if (this.cartList[index].num <= 1) return;
				this.cartList[index].num--;
				this.request_cartedit(this.cartList[index], 1);
			},

			// ++
			addNum(index) {
				this.cartList[index].num++;
				this.request_cartedit(this.cartList[index], 2);
			},
			
			// 结算
			goClose(){
				let isTrue = this.cartList.some(item => item.status);
				
				if(!isTrue) {
					uni.showToast({
						title: '至少选中一件商品',
						icon: 'error'
					});
					return;
				}
				
				let newData = this.cartList.filter(item => item.status);
				uni.setStorageSync('cartData', {
					list: newData,
					totalPrice: this.totalPrice,
					totalNum: this.totalNum
				});
				
				uni.navigateTo({
					url: `/pages/order/order`
				})
				 
			},

			// 删除事件
			async removeData(item) {
				let [err, {
					data
				}] = await uni.request({
					method: "POST",
					url: `${this.$baseApi}cartdelete`,
					header: {
						authorization: userinfo.token
					},
					data: {
						id: item.id
					}
				});

				if (data.msg != '删除成功') return;

				uni.showToast({
					title: data.msg
				});
				console.log(data);
				this.request_cartlist();
			},

			// 获取列表
			async request_cartlist() {
				const userinfo = uni.getStorageSync('userinfo');
				if(!userinfo){
					this.buffer = false;
					uni.showToast({
						title: '请先登录',
						icon: 'error'
					})
					return;
				}
				
				let [err, {
					data
				}] = await uni.request({
					url: `${this.$baseApi}cartlist`,
					header: {
						authorization: userinfo.token
					},
					data: {
						uid: userinfo.uid
					}
				});
				console.log(data);
				if (!data.list) {
					this.buffer = false;
					return;
				}
				this.buffer = true;

				// 处理数据
				data.list.forEach(item => {
					item.img = this.$baseUrl + item.img;
					item.status = item.status == 1 ? true : false;
				});
				this.cartList = data.list;
			},

			// 修改列表
			request_cartedit(item, type = 2) {
				if (this.fd) {
					clearTimeout(this.fd);
				}
				this.fd = setTimeout(async () => {
					let [err, {
						data
					}] = await uni.request({
						method: "POST",
						url: `${this.$baseApi}cartedit`,
						header: {
							authorization: userinfo.token
						},
						data: {
							id: item.id,
							type
						}
					});
					console.log(data);
				}, 3000);
			}
		}
	}
</script>

<style scoped>
	/* 引入样式文件 */
	@import url("@/static/css/cart.css");
</style>
